<template>
  <view class="page">
		<view class="team-bg padding-left-sm fu-fs32 text-white">
			<text>累计返佣：</text>
			<text class="text-price"></text>
			<text class="fu-fs48">{{userInfo.total_commission | formatNumber}}</text>
		</view>
		
		<view class="team-wrap bg-white padding-lr-sm margin-lr-sm radius-16">
			<view class="title">我的邀请人</view>
			<view class="padding-tb flex align-center justify-between" v-if="userInfo && userInfo.invite && userInfo.invite.user_nickname">
				<view class="flex align-center">
					<fu-image :src="userInfo.invite.head_img" mode="aspectFill" class="block-80" :radius="'50%'"></fu-image>
					<view class="margin-left-sm text-333">{{userInfo.invite.user_nickname}}</view>
				</view>
				<view class="text-999 text-sm">
					{{userInfo.invite.create_time}}  绑定
				</view>
			</view>
			<view class="padding-tb" v-else>暂无绑定关系</view>
			<view class="title">团队成员（{{listData.length || 0}}）</view>
			<block v-for="(item, index) in listData" :key="index">
				<view class="padding-tb flex align-center justify-between">
					<view class="flex align-center">
						<fu-image :src="item.head_img" mode="aspectFill" class="block-80" :radius="'50%'"></fu-image>
						<view class="margin-left-sm text-333">{{item.user_nickname}}</view>
					</view>
					<view class="text-999 text-sm">
						{{item.create_time}}  绑定
					</view>
				</view>
			</block>
		</view>
    <!-- 空状态 start-->
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData" :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <!-- 空状态 end -->
    <!-- 断网监测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网监测 end -->
  </view>
</template>

<script>
// 引入混入数据加载 js
import pagingList from '@/common/mixin/paging_list.js';
export default {
  mixins: [pagingList], //混入
  data() {
    return {
      StatusBar: this.StatusBar, // 标题栏高度
      CustomBar: this.CustomBar, // 状态栏高度
      minixPagingListsApi: global.apiUrls.postMyTeamList, //混入获取列表接口名
      // allowOnloadGetList: false, //是否允许onlaod加载数据
      pageingListApiMethod: 'post', //接口类型属于get
    };
  },
	computed: {
		userInfo() {
			return this.$store.getters.userInfo || {};
		},
	},
	onLoad() {
	},
  methods: {
    /**
     * @description 混入传参钩子函数
     * @param type 获取数据类型 type 1为收藏列表 3为浏览历史
     */
    pagingListPostData() {
      return {
				type: 1
      };
    },
  }
};
</script>

<style lang="scss" scoped>
	.page {
		.team-bg {
			width: 100%;
			height: 240rpx;
			padding-top: 60rpx;
			background: url($IMG_WECHAT_URL+'/user/team-bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.team-wrap {
			margin-top: -72rpx;
			.title {
			  padding: 24rpx 0 24rpx 22rpx;
			  border-bottom: 1px solid #eeeeee;
			  position: relative;
			
			  &:after {
			    position: absolute;
			    left: 0;
			    top: 50%;
			    transform: translateY(-50%);
			    width: 6rpx;
			    height: 30rpx;
			    border-radius: 8rpx;
			    content: '';
			    display: block;
			    background: $bgtheme;
			  }
			}
			.block-80 {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>
